<template>
  <div class="double-ring">
    <div class="legend">
      <span class="legend-span"
            v-for="(item, index) in legend"
            :key="index">
        <i></i>{{ item }}
      </span>
    </div>
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import * as echartsOption from './../../utils/echarts-option'
export default {
  name: 'doubleRing',
  props: {
    // 图例
    legend: {
      type: Array
    },
    // 半径大小 如'50%'
    color: {
      type: Array
    },
    // 填充区颜色
    data: {
      type: Array,
      default: () => {
        return [0, 0]
      }
    }
  },
  components: {
  },
  data () {
    return {
      chart: '',
      empty: false // 控制图例位置
    }
  },
  methods: {
    initChart () {
      if (this.chart.isDisposed) {
        this.chart.dispose()
      }
      this.chart = echarts.init(this.$refs.chart)
      let chartOption = echartsOption.doubleRing({
        color: this.color,
        data: this.data
      })
      this.chart.setOption(chartOption)
    },
    resizeChart () {
      this.chart.resize()
    }
  },
  mounted () {
    this.initChart()
  },
  watch: {
    data: function () {
      this.initChart()
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  .double-ring{
    width: 100%;
    height: 100%;
    .legend{
      width: 100%;
      margin-top:10px;
      font-size: 12px;
      padding-left: 10%;
      color: #fff;
      box-sizing: border-box;
      text-align: left;
      span{
        display: block;
        white-space: nowrap;
        i{
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-right:8px;
          border-radius: 100%;
        }
        &:nth-of-type(1){
          i{
            background: #1ca7e1;
          }
        }
        &:nth-of-type(2){
          i{
            background: #ba0577;
          }
        }
      }
    }
    .chart{
      width: 100%;
      height: 62%;
    }
  }
</style>
